<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pea tips社区</title>
<link rel="stylesheet" type="text/css" href="/networkforum/css/base.css" />
<link rel="stylesheet" type="text/css" href="/networkforum/css/picture_show.css" />
<!–[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
<script type="text/javascript">
function loadPictureReply(pictureId){
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get("/networkforum/picture/get_picture_reply.do?pictureId="+pictureId,loadReplyCallBack);
	myajax = null;
}
function loadReplyCallBack(d){
	//var data = eval("("+d+")");
	var dd = toJson(d);
	var data = dd.replys;
	var user = dd.owner;
	document.getElementById("userPhoto").src = user.userPhoto;
	document.getElementById("userName").innerHTML = user.userName;
	document.getElementById("userSign").innerHTML = user.userSign;
	
	var ul = document.getElementById("pictureReplyUl");
	ul.innerHTML = "";
	if(data.length==0){
		var li = document.createElement("li");
		li.innerHTML = "暂无评论";
		li.id="noReply";
		ul.appendChild(li);
		return;
	}
	var frag = document.createDocumentFragment();
	var length = data.length;
	for(var i=0;i<length;i++){
		var dd = data[i];
		var li = createReply(dd);
		frag.appendChild(li);
	}
	
	ul.appendChild(frag);
}
function createReply(dd){
	var li = document.createElement("li");
	var name = document.createElement("label");
	var content = document.createElement("span");
	var replyTime = document.createElement("span");
	var replyButtom = document.createElement("label");

	name.innerHTML = dd.name+"：";
	name.userId = dd.userId;
	content.innerHTML = dd.content;
	content.className = "replyContent";
	replyTime.innerHTML = dd.time;
	replyButtom.innerHTML = "回复"; 
	replyButtom.userName = dd.name;
	li.appendChild(name);
	li.appendChild(content);
	li.appendChild(replyTime);
	li.appendChild(replyButtom);
	replyButtom.onclick = function(event){
		var e = event || window.event;
		var target = e.target || e.srcElement;

		var useractive = document.getElementById("useractive");
		useractive.value = "回复 "+target.userName+":";
		useractive.focus();
	}
	return li;
}
var move = function(){
	var target = function(){
		this.ul = null;
		this.data = [];
		this.showCenter = null;
		this.target = null;
		this.length = 94;
		this.ulIndex = 0;
		this.index = 0;
		this.last = true;
		this.first = true;
		this.hasMore = true;
	}
	target.prototype = {
		init:function(d){
			var self = this;
			self.data = self.data.concat(d);
			self.target = document.getElementById("target");
			self.showCenter = document.getElementById("pictureMain");			
			self.ul = document.getElementById("picutreNav");
		},
		right:function(){
			var self = this;
			if(self.target==null){
				self.init();
			}
			if(!self.checkRight()){
				return;
			}
			self.ulIndex++;
			self.index = self.index + 1;
			self.move(2);
			self.change(self.ulIndex);
		},
		left:function(){
			var self = this;
			if(self.target==null){
				self.init();
			}
			if(!self.checkLeft()){
				return;
			}
			self.move(-2);	
			self.index = self.index -1 ;							
			self.ulIndex--;
			self.change(self.ulIndex);
		},
		move:function(l){
			var self = this;
			var i =0;
			if(self.index==8){
				self.target.style.left = "0px";	
				self.index = 1;
				self.ul.style.left = self.ul.offsetLeft-self.length*7 + "px";
			}
			else if(self.index<=0){
				self.target.style.left = self.length*8 + "px";	
				self.index = 8;
				self.ul.style.left = self.ul.offsetLeft+self.length*7 + "px";
			}
			var m = setInterval(function(){
				self.target.style.left = self.target.offsetLeft + l + "px";
				i = i+2;
				if(i>=self.length){
					clearInterval(m);	
				}
			},1);
		},
		moveLeft:function(){
			var self = this;
			if(self.ulIndex>=7){
				self.ul.style.left = self.ul.offsetLeft+self.length*7 + "px";
				self.ulIndex = self.ulIndex - 7;
			}
			else{
				alert("已经第一页");
			}
		},
		moveRight:function(){
			var self = this;
			var tt = self.data.length%8;
			if(self.ulIndex<self.data.length){
				self.ul.style.left = self.ul.offsetLeft-self.length*7 + "px";
				self.ulIndex = self.ulIndex + 7;
				if(tt<self.index){
					for(var i=0;i<self.index-tt;i++){
						self.move(-2);
					}
					self.change(self.data.length-1);
					self.ulIndex = self.data.length-1;
					self.index = tt;
				}
			}
			else{
				alert("已经最后页");
			}
		},
		change:function(index){
			var self = this;
			//var img = self.data[index].cloneNode(true);;
			var pictureId = self.data[index].pictureId;
			self.showCenter.src = self.data[index].pictureSrc;
			self.showCenter.pictureId = pictureId;
			loadPictureReply(pictureId);
			document.getElementById("pt").innerHTML = self.data[index].publishTime;
		},
		load:function(){
			var self = this;
			if(self.last){
				alert("已经是最后一张");
				return;
			}
			else if(self.first){
				alert("已经是第一张图片");
				return;
			}
		},
		checkRight:function(){
			var self = this;
			if(self.ulIndex==self.data.length-1){
				alert("已经是最后一张");
				return false;
			}
			if(self.ulIndex>=self.data.length-3&&self.hasMore){
				//alert("向右加载");
				reloadInfo(++index,size);
				return true;
			}
			return true;
		},
		checkLeft:function(){
			var self = this;
			if(self.ulIndex<=0){
				//alert("向左加载");
				//reloadPicture(--index,size);
				return false;
			}
			return true;
		}
	}
	return new target();
}();
var moveTo = 0;
window.onload = function(){
	var targetId = document.getElementById("result").value;
	var pm = document.getElementById("pm").value;
	pm = pm.slice(0,pm.length-1);
	targetId = targetId.slice(0,targetId.length-1);
	if(pm == "true"){
		moveTo = targetId%10;
		targetId = Math.floor(targetId/10);
		reloadInfo(targetId,10);
	}
	else{
		reloadInfo(0,10);
	}
}
var index = 0;
var size = 10;
function reloadInfo(index,size){
	//var targetId = document.getElementById("result").value;
	//var isgroup = document.getElementById("isgroup").value;
	var url = document.getElementById("loadUrl").value;
	
	//targetId = targetId.slice(0,targetId.length-1);
	//isgroup = isgroup.slice(0,isgroup.length-1);
	url = url.slice(0,url.length-1);
	
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	//myajax.get("/networkforum/picture/visit_picture.do?option=picture_id&asc=true&index="+index+"&size="+size+"&targetId="
	//myajax.get(url+"?option=picture_id&asc=true&index="+index+"&size="+size+"&targetId="
	//		+targetId+"&isgroup="+isgroup,initBack);
	myajax.get(url+"&index="+index+"&size="+size,initBack);
	myajax = null;
}
function initBack(d){
	//var data = eval("("+d+")");
	var data = toJson(d);
	data = data.mp||data;
	if(data.length==0){
		//alert("图片已经不存在");
		move.hasMore = false;
		return;
	}
	var length = move.data.length;
	//document.getElementById("pictureMain").src = data[0].pictureSrc;
	document.getElementById("pictureMain").src = data[0].pictureSrc;
	document.getElementById("pt").innerHTML = data[0].publishTime;
	move.init(data);
	for(var i=0;i<moveTo;){
		move.right();
		moveTo--;
	}
	var ul = document.getElementById("picutreNav");
	var frag = document.createDocumentFragment();
	for(var i =0;i<data.length;i++){
		var dd = data[i];
		var li = document.createElement("li");
		var img = document.createElement("img");
		//img.src = dd.pictureSrc;
		reloadPicture(img,dd.pictureSrc);
		img.publisTime = dd.publishTime;
		img.replyTime = dd.replyTime;
		img.visitTime = dd.visitTime;
		img.pictureId = dd.pictureId;
		img.index = length+1+i;
		li.appendChild(img);
		frag.appendChild(li);
		img.onclick = skipTo;
	}
	ul.appendChild(frag);
}
function skipTo(event){
	event = event||window.event;
	var target = event.target;
	var length = target.index%9;
	var index = move.ulIndex+1;
	if(length>index){
		for(var i =0;i<length-index;i++){
			move.right();
		}
	}
	else{
		for(var i =0;i<index-length;i++){
			move.left();
		}
	}
}
function replyPicture(){
	var pictureId = document.getElementById("pictureMain").pictureId;
	var reply = document.getElementById("useractive");
	var content = encodeURIComponent(reply.value);
	reply.value = "";
	var index = content.indexOf(':');
	if(index>0){
		index = index+1;
		var target = content.slice(0,index);
		content = "<span style='color:gray'>"+target+"</span>"+content.slice(index,content.length);
	}
	var url = "/networkforum/picture/picture_reply.do?pictureId="+pictureId+"&content="+content;
	var myajax = getByAjax();
	myajax.init(null,"get",true);
	myajax.get(url,function(d){
		var data = toJson(d);
		var ul = document.getElementById("pictureReplyUl");
		ul.appendChild(createReply(data));
		var noReply = document.getElementById("noReply");
		if(noReply){
			ul.removeChild(noReply);
		}
		noReply = null;
		data = null;
		ul = null;
	});
	myajax = null;
}
</script>
</head>

<body>
	<input id="result" type="text" style="display: none;" value=${targetId}/>
	<input id="isgroup" type="text" style="display: none;" value=${isgroup}/>
	<input id="loadUrl" type="text" style="display: none;" value=${loadUrl}/>
	<input id="pm" type="text" style="display: none;" value=${pictureModule}/>
	<iframe class="tnav" src="/networkforum/pages/user/user_header.html"></iframe>
	<section class="pictureShow">
		<section class="leftInner">
			<!-- -<header id="tt" class="leftHeader">
				<h2>图片浏览</h2>
			</header>
			 -->
			<section class="leftMain">
				<img onclick="move.left();" onmouseover="cbp(this,'/networkforum/images/pleft2.jpg')" onmouseout="cbp(this,'/networkforum/images/pleft1.jpg')" class="leftPicture change" src="/networkforum/images/pleft1.jpg"/>
				<div class="pictureMain">
					<img id="pictureMain" src="/networkforum/pages/error.jpg"/>
				</div>
				<img onclick="move.right();" onmouseover="cbp(this,'/networkforum/images/pright2.jpg')" onmouseout="cbp(this,'/networkforum/images/pright1.jpg')" class="rightPicture change" src="/networkforum/images/pright1.jpg"/>
			</section>
			<section class="leftBottom">
				<img onclick="move.moveLeft();" onmouseover="cbp(this,'/networkforum/images/pleft2.jpg')" onmouseout="cbp(this,'/networkforum/images/pleft1.jpg')" class="leftPicture ulchange" src="/networkforum/images/pleft1.jpg"/>
				<section class="bcent">
                    <div id="target" class="alpha5"></div>
                    <ul id="picutreNav">
                    </ul>
                </section>
				<img onclick="move.moveRight();" onmouseover="cbp(this,'/networkforum/images/pright2.jpg')" onmouseout="cbp(this,'/networkforum/images/pright1.jpg')" class="rightPicture ulchange" src="/networkforum/images/pright1.jpg"/>
			</section>
		</section>
		<section class="rightInner">
			<header class="rightHeader">
				<img id="userPhoto" src="/networkforum/images/left1.jpg"/>
                <label id="userName"></label>
                <label id="userSign">aaa</label>
                <div class="clear"></div>
                <label id="pt" style="float: left;display: inline-block;margin-top: 5px;"></label>
			</header>
            <section class="rightNav">
            	<label>赞</label>
                <label>评论</label>
            </section>
			<section class="rightMain">
				<ul id="pictureReplyUl">
					<!-- <li>
						<label>xunxun</label>
						<span>身</span>
						<span>2013-1-1 12:12:12</span>
						<label>回复</label>
					</li>
					 -->
				</ul>
			</section>
			<section class="replyPicture">
				<textarea id="useractive" wrap="physical"></textarea>
				<a href="#" onclick="replyPicture()"><img src="/networkforum/images/unp.jpg" /></a>   
			</section>
		</section>
	</section>
	
	<iframe class="footer" src="/networkforum/pages/footer.html"></iframe>
</body>
<script type="text/javascript" src="/networkforum/js/base.js"></script>
<script type="text/javascript" src="/networkforum/js/myajax.js"></script>
</html>



